import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0302',
  templateUrl: './ex0302.component.html',
  styleUrls: ['./ex0302.component.scss']
})
export class Ex0302Component implements OnInit, AfterViewInit {
  private ctx: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // this.draw1(this.ctx)
    // this.draw2(this.ctx)
    // this.draw3(this.ctx)
    // this.draw4(this.ctx)
    this.draw5(this.ctx)
  }

  draw1(ctx): void {
    ctx.beginPath()
    ctx.arc(70, 70, 50, 0, -Math.PI / 2, true)
    ctx.stroke()
  }

  draw2(ctx): void {
    ctx.moveTo(20, 20)
    ctx.lineTo(70, 20)
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(70, 70, 50, 0, -Math.PI / 2, true)
    ctx.moveTo(120, 70)
    ctx.lineTo(120, 120)
    ctx.stroke()
  }

  draw3(ctx): void {
    ctx.moveTo(20, 20)
    // ctx.lineTo(70, 20)
    ctx.arcTo(120, 20, 120, 70, 50)
    ctx.lineTo(120, 120)
    ctx.stroke()
  }

  draw4(ctx): void {
    ctx.moveTo(40, 20)
    // ctx.lineTo(160, 20)
    ctx.arcTo(180, 20, 180, 40, 20)
    // ctx.moveTo(180, 40)
    // ctx.lineTo(180, 110)
    ctx.arcTo(180, 130, 160, 130, 20)
    // ctx.moveTo(160, 130)
    // ctx.lineTo(40, 130)
    ctx.arcTo(20, 130, 20, 110, 20)
    // ctx.moveTo(20, 110)
    // ctx.lineTo(20, 40)
    ctx.arcTo(20, 20, 40, 20, 20)
    ctx.stroke()
  }

  draw5(ctx): void {
    this.createRoundedRect(ctx, 100, 100, 20, 20, 20)
    ctx.fillStyle = 'HotPink'
    ctx.fill()
  }

  createRoundedRect(ctx, width, height, r, offsetX, offsetY): void {
    ctx.beginPath()
    ctx.moveTo(offsetX + r, offsetY)
    ctx.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r)
    ctx.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r)
    ctx.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r)
    ctx.arcTo(offsetX, offsetY, offsetX + r, offsetY, r)
    ctx.closePath()
  }
}
